import { Button, Form, Select, Space } from "antd";
import { Attachment } from "@/types/content/attachment";
import { useEffect, useState } from "react";
import { queryTagList } from "@/api/content/attachment";
interface IProps {
  onChange: (form: Attachment.QueryForm) => void;
}
export default function PhotoSearchForm({ onChange }: IProps) {
    const [tagList, setTagList] = useState<string[]>([]);
    /**
     * 获取标签列表
     */
    const getTagsList = async () => {
      const res = await queryTagList('0');
      if (res.code === 200) {
        setTagList(res.data || []);
      }
    };
    useEffect(() => {
      getTagsList();
    }, []);
  const [form] = Form.useForm();
  return (
    <Form
      layout="inline"
      form={form}
      name="PhotoSearchForm"
      onFinish={(form) => {
        onChange(form);
      }}
      autoComplete="off"
    >
      <Form.Item<Attachment.QueryForm> label="标签" name="tag">
      <Select placeholder="请选择"  style={{ width: 180 }} allowClear size="middle">
          {tagList.map((tag) => (
            <Select.Option key={tag} value={tag}>
              {tag}
            </Select.Option>
          ))}
        </Select>
      </Form.Item>
     

      <Form.Item>
        <Space>
          <Button type="primary" htmlType="submit" size="middle">
            查询
          </Button>
          <Button
            htmlType="button"
            size="middle"
            onClick={() => {
              form.resetFields();
              form.submit();
            }}
          >
            重置
          </Button>
        </Space>
      </Form.Item>
    </Form>
  );
}
